<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="../../../public/stylesheets/switch-nav.css" />
		<script type="text/javascript" src="../../../public/javascripts/switch-nav.js"></script>
	</head>
	<body>
	     <div id="container">
           <div id="title">
              <ul>
                 <li id="tag1">
                 	<a href="#" onclick="switchTag('tag1','content1');this.blur();" class="selectli1">
                 	  <span class="selectspan1">首页</span>
                 	</a>
                 </li>
                 <li id="tag2"><a href="#" onclick="switchTag('tag2','content2');this.blur();"><span>下载中心</span></a></li>
                 <li id="tag3"><a href="#" onclick="switchTag('tag3','content3');this.blur();"><span>产品介绍</span></a></li>
                 <li id="tag4"><a href="#" onclick="switchTag('tag4','content4');this.blur();"><span>会员注册与登录</span></a></li>
                 <li id="tag5"><a href="#" onclick="switchTag('tag5','content5');this.blur();"><span>联系我们</span></a></li>
              </ul>
           </div>
          <div id="content" class="content1">
             <div id="content1"><p>仿淘宝网站的导航效果。此方法有几个优点：</p>1、根据字数自适应项目长度</div>
             <div id="content2" class="hidecontent">2、不同的项目使用不同的颜色来区分</div>
             <div id="content3" class="hidecontent">3、这回需要使用到js了，呵呵</div>
             <div id="content4" class="hidecontent">4、背景图片只需要两个图片文件就足够，减少服务器负担</div>
             <div id="content5" class="hidecontent">5、这是使用到的两个图片：
                <table width="58%" border="1" cellspacing="2" cellpadding="0">
                  <tr>
                    <td width="70%" align="center">你好</td>
                    <td width="30%" align="center">你好</td>
                  </tr>
                </table>
             </div>
          </div>
        </div>
	</body>
</html>
